import { Button, Card, Form, InputNumber, Radio } from 'antd'
import { useTranslations } from 'next-intl'
import React, { useState } from 'react'
import styles from './index.module.less'

const PaymentPage: React.FC = () => {
  const t = useTranslations()
  const [_paymentMethod, setPaymentMethod] = useState('wechat')

  const onFinish = (values: any) => {
    console.log('Payment values:', values)
    // TODO: Implement payment logic
  }

  return (
    <div className={styles.container}>
      <h1>{t('payment.title')}</h1>
      <Card>
        <Form layout="vertical" onFinish={onFinish}>
          <Form.Item
            label={t('payment.amount')}
            name="amount"
            rules={[{ required: true, message: t('payment.amountRequired') }]}
          >
            <InputNumber
              min={10}
              max={10000}
              style={{ width: '100%' }}
              formatter={(value) => `¥ ${value}`}
            />
          </Form.Item>

          <Form.Item label={t('payment.method')} name="method" initialValue="wechat">
            <Radio.Group onChange={(e) => setPaymentMethod(e.target.value)}>
              <Radio value="wechat">{t('payment.wechatPay')}</Radio>
              <Radio value="alipay">{t('payment.alipay')}</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              {t('payment.confirm')}
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default PaymentPage
